import React, { Component } from 'react'
import axios from '../utils/request'
import '../App.css'
// import {
//     SearchOutlined,
//     RightOutlined,
// } from '@ant-design/icons';
import { Carousel } from 'antd';
const contentStyle = {
    height: '200px',
    color: '#fff',
    lineHeight: '200px',
    textAlign: 'center',
    background: '#364d79',
};
export default class Live extends Component {
    state = {
        list: []
    }

    componentDidMount() {
        axios({
            url: '/getlist',
            method: 'post'
        }).then(res => {
            this.setState({
                list: res.data.data
            })
        })
    }
    render() {
        const { list } = this.state
        return (
            <div className='live'>
                <div className='swiper_1'>
                    <Carousel autoplay className='swper'>
                        <div>
                            <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=307507940,2553598401&fm=26&fmt=auto"></img></h3>
                        </div>
                        <div>
                            <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=4252242885,521694642&fm=26&fmt=auto"></img></h3>
                        </div>
                        <div>
                            <h3 style={contentStyle}><img src="https://img0.baidu.com/it/u=2034926359,1578432069&fm=26&fmt=auto"></img></h3>
                        </div>
                        <div>
                            <h3 style={contentStyle}><img src="https://img2.baidu.com/it/u=1418193818,4120595344&fm=253&fmt=auto&app=120&f=JPEG?w=759&h=485"></img></h3>
                        </div>
                    </Carousel>
                </div>
                <div className='swiper_2'>
                    {
                        list.length && list.map((item, index) => {
                            return <div key={index} className='time'>

                                <img src={item.imge}></img>
                                <div>
                                    <li>{item.sold}</li>
                                    <li><span>{item.time}</span>&emsp;&emsp;&emsp;&emsp;&emsp;<span>阅读{item.num}</span>&emsp;<span>赞{item.count}</span></li>
                                </div>
                            </div>

                        })
                    }
                </div>
            </div>
        )
    }
}
